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ABSTRACT 



The development of potentially powerful computer-based tools 
within rich learning environments is hampered by the constraints of delivery 
systems (specifically low-resolution, low-real estate displays) . In designing 
a World Wide Web-based tool for manipulating time-based information, the 
authors have encountered a lack of guidelines or empirical research to help 
resolve problems related to displaying timelines on 72 dpi, 640x480 pixel 
computer screens. In a study comparing linear vs. staggered arrangement of 
standard 32x32 pixel icons on an interactive timeline, it was found that 
subjects perform significantly faster when making temporal relationship 
comparisons with the linear arrangement of icons on a timeline. Study 
participants were 42 undergraduate students at a large midwestern university. 
Participants interacted with a Java-based timeline/icon display. Data were 
gathered related to completion time, answer accuracy, and answer accuracy 
when the "overlaps /overlapped by" temporal relationship from the data set was 
removed. (Contains 26 references.) (Author/DLS) 
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Abstract 

The development of potentially powerful computer-based tools within rich learning environments is 
hampered by the constraints of delivery systems (specifically low-resolution , low -real estate displays). In designing 
a Web-based tool for manipulating time-based information the authors have encountered a lack of guidelines or 
empirical research to help resolve problems related to displaying timelines on 72 dpi , 640x480 pixel computer 
screens. In a study comparing linear vs. staggered arrangement of standard 32x32 pixel icons on an interactive 
timeline and found that subjects perform significantly faster when making temporal relationship comparisons with 
the linear arrangement of icons on a timeline. 

Rich learning environments are often envisioned to contain, or even to revolve around, powerful computer- 
based tools (Allen & Otto, 1996; Barab, Hay, & Duffy, in press; Edwards, 1995; Land & Hannafin, 1996; Papert, 
1991; Perkins, 1991). In the face of technical limitations (specifically, low resolution displays and limited screen 
space) that are prevalent in educational settings (President’s Committee of Advisors on Science and Technology, 
1997) the visual design problems entailed in actually implementing such tools are serious. Interface designers for 
computer-based learning tools need to be able to turn to guidelines and empirical research relevant to the 
representation of complex information in relatively low resolution environments for help in solving those problems. 

Timeline displays in relatively low-resolution, low-real estate conditions 

The authors of this study are currently involved in the design of a Web-based learning tool in which the 
display of temporal, or time-based, information is the primary vehicle for interaction. The tool offers multiple views 
of any single data set at varying degrees of detail: 

a) a high level overview in which only clusters of data points are visible, 

b) a mid-level view in which individual data points appear differentiated only by their duration indicators 
(bars drawn along a timeline), 

c) a mini-view showing the user’s current position in either the high level (a) or the mid-level (b) view, and 

d) a detail view in which individual data points are represented by standard screen icons (32x32 pixels) 
which differ according to the predetermined topical category into which the data point falls. Each icon in 
this view is accompanied by a text title naming the data point and by a duration bar indicating the defined 
starting and stopping points in time for that item (Figure 1.). 
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Figure 1. Single icon , text label and duration bar 



The detail view (d) of this design presents particular problems in formal design; namely, the accurate 
representation of a reasonable number of data points in a format that best supports the quick and accurate 
determination of temporal relationships between events. Given a 72 dpi, 13 M screen display (640x480 pixels), which 
is the stated or implied lowest common denominator in numerous commercial design publications (Kristof & Satran, 




1995; Lopuck, 1996; Lynch, 1994; Niederst & Freedman, 1996; Waters, 1996), the limitation on the number of data 
points that can appear in a single display is quite severe. The practical design question becomes how to fit as many 
data points as possible on the screen and still provide a display of the information that affords efficient visual 
processing by the user? 

Problems with guidelines 

In surveying the available guidelines for screen design the authors encountered problems similar to those 
described by Lee and Boling (1995). Guidelines are frequently aimed at single dimensions of a display (size of text, 
use of color, placement of icons). Complex representations of information, like timelines, require the integration of 
multiple elements, all of them influencing all the others by virtue of the way they are combined . Single dimension 
guidelines are of little use in solving complex design problems. 

Guidelines specifically regarding the design of data displays like charts, graphs and diagrams (including 
timelines) do not offer guidance for low resolution situations (Kosslyn, 1994; Fleming & Levie, 1996), or simply 
state that high-resolution is required for the effective design of such displays (Tufte, 1997). While Tufte may be 
correct in the pure case of designing optimal displays, the fact remains that developers of learning tools must do the 
best possible job within existing constraints. 

Empirical research and timeline displays 

To date the authors have found no empirical research specifically studying the effective design of timelines, 
for print or for screen. Numerous studies do exist, however, in which print displays have been used to investigate 
mental imagery related to temporal information, and cognitive processes in temporal problem-solving. This 
literature suggests that alternative representations should be available for learners depending on the nature of the 
tasks for which they will use temporal information (Friedman, 1989, 1990), that learners will not intuitively 
understand displays of temporal information (Uka, 1962), and that learners of different ages will have varying 
degrees of difficulty using such displays effectively no matter how well they are designed (Friedman, 1992; Levin, 
1992). 

Representing time-based information 

The power of spatial representations of time lies in the simultaneous comparison of items in order to 
perceive relationships that are not readily discernible through experience alone. Every spatial representation of time 
emphasizes some aspect of the information at the expense of another (Friedman, 1990). Timelines, an instance of 
spatial representations of time, emphasize duration relationships , of which thirteen distinct types (Figure 2). may 
exist between any two given time durations (Allen & Kautz, 1985); 

• equals (1), 

• before/after (2,3), 

• meets/met by (4,5), 

• overlaps/overlapped by (6,7), 

• starts/started by (8,9), 

• during/contains (10,1 1), and 

• finishes/finished by (12,13). 
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Figure 2. Visual representation of the thirteen temporal relationship types. 

Although timelines are frequently used to represent temporal information, they are by no means universal - 
- nor is the use of the abstract measures of time which allow such representations (Friedman, 1990). Our society is 
permeated with abstract measures and representations of time (and other forms of information), but we do not 
necessarily make effective use of any but the most basic and common displays (Tufte, 1983). In other words, there 
are no "universal" expectations or conventions that the designers of an interactive timeline display may rely on to be 
confident that its users will interpret its contents correctly, but there are some commonly used representations to 
which people may be more or less accustomed. 

Paper-based timelines are often printed on oversized paper (on the horizontal dimension, if not the vertical), 
or reproduced at a very high resolution in order to capture all the text and images required to convey multiple events 
simultaneously. When the size or the resolution of a timeline is reduced drastically, our hypothesis is that the 
simultaneous perception of events may be compromised. 

Pragmatic problems with screen size, resolution and timeline displays using 32x32 pixel 
icons 

At 72 dpi, a 640x480 screen display includes a total of 307,200 pixels. At 1024 pixels per standard 32x32 
pixel icon, 300 icons could fit on the screen in a tiled arrangement: providing they did not include text titles. In fact, 
after subtracting interface elements (scroll bars, window titles, timeline labels, etc.) at approximately 40 pixels 
vertically and 45 pixels horizontally (a conservative estimate based on one horizontal and one vertical scroll bar, a 
labeled timeline, and a 30 pixel vertical space for category labels, buttons and other interface elements) the 
remaining 595x440 display can only hold approximately 255 icons, again tiled. Allowing for a 64-pixel title per icon 
(64x32 pixels per icon), this number drops to 127 tiled icons in that same space. Of course, since the placement of 
the icons is dependent on their specific relationship to the timeline, they are never likely to be perfectly tiled so as to 
take maximum advantage of the available pixels. The effective number of standard-size icons that may fit on our 
hypothetical timeline screen is therefore some number fewer (generally distinctly fewer) than 127. Given the several 
thousands of data points possible in a given query for the project under development, it was a matter of some 
concern to the authors that the arrangement of those icons be optimized for this relatively limited display. 

Smaller icons and other alternative displays 

It is perfectly possible to envision simple solutions to the pragmatic problems in formal design for timeline 
displays in which the 64x32 pixel icon-plus-label constraint is removed; for example, events might be represented 
by titles and duration bars only, or even by duration bars only, at a savings of as much as half the vertical space 
required for individual items. The authors pursued experimentation with icon displays, however, for reasons related 
to discriminability and user preference. 
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Discriminability 

Searching for individual items in a complex display can be made more effective when the items themselves 
exhibit high discriminability, or differences that clearly distinguish them one from the other (Horton, 1994; Wolfe, 
1996). Pictorial representations (icons) are more discriminable than text labels alone (Fleming & Levie, 1993), and 
certainly more discriminable than duration bars alone. While the use of icons on a timeline does not dictate high 
discriminability (if an author uses the same icon for every event, for example), the ability to display icons on the 
timeline provides the possibility for representations of events to be well-differentiated. 

Preference for icons 

The user-collaborator working with the authors currently has expressed a strong preference for icons 
accompanying text labels on the timeline, and expects that students using the tool will want to create new icons and 
attach them to specific types of events. In the experience of the authors, similar preferences are frequently expressed 
by users and user-designers of screen displays. A few early icon studies in which preference measures were 
employed have revealed the same preference (Edigo & Patterson, 1988; Guastello, Traut, & Korienek, 1989)., 
although these findings are by no means universal. 

Linear vs, staggered arrangement of icons on the timeline display 

Two common timeline strategies (whether or not icons are used to represent data points) represent events as 
perceptual "bars," stretching from their beginning point to their ending point in a consistent relationship to a series 
of constant units marked off at the top or the bottom of the display. The two strategies vary only in the spatial 
arrangement of the bars representing events (Figure 3.). The first arrangement places each event successively higher 
on the screen display, and places each event further to the right depending on when that event begins in time (linear 
arrangement). The second arrangement conserves screen space by placing events arbitrarily on the vertical 
dimension at any time that there is room available for them (staggered arrangement). 

item e 



itemd 

itemc 



item b 
item a 

LINEAR /ARRANGEMENT OF EVENTS (DATA FONTS) 



itemc 

item b itemd 

item a 



item e 



STAGGERED ARRANGEMENT OF EVENTS (DATA FONTS) 

Figure 3. Linear vs. staggered arrangement of generic event bars on a timeline . 



Purpose of the Study 

The authors conducted two studies to determine whether subjects using an interactive timeline work faster 
and make fewer errors in judging temporal relationships between pairs of events when the events on the timeline 
appear in a linear arrangement or in a staggered arrangement. The first study also examined subject's self-reported 
patterns of searching for items on the timeline displays, and their subjective impressions of the difficulty of using the 
timeline display. 

A linear arrangement of icons on a timeline was expected to result in more scrolling of the screen display 
since every new data point appears above the previous one and the total display very quickly exceeds the screen 
space available without scrolling. A linear display was also expected to result in some loss of simultaneity since 
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events that are close in time mightnot appear on the screen together, again owing to the steep rise created by placing 
each data point higher on the screen than the previous one (Figure 4). For these reasons subjects were expected to 
take more time judging temporal relationships using the linear arrangement. 






events close in time that do 
not appear in the display 
together without scrolling 



■ visible portion of the display 

Figure 4. Linear arrangement of data points with loss of simultaneity and high requirements for scrolling. 



The staggered arrangement requires that subjects ignore differences on the vertical dimension in order to 
judge temporal relationships between events correctly, since events may appear either above or below others 
regardless of whether they begin earlier or later on the time scale. In addition, the staggered display was expected to 
be "noisier," with more icons appearing on the screen at one time, and therefore potentially distracting as subjects 
tried to judge relationships between events. The staggered display would also require scrolling for even moderately 
large data sets, although it was presumed not to require as much scrolling as the linear display. Consequently, the 
staggered arrangement was expected to result in more errors. 

Method 

Participants 

Forty-two undergraduate students (19 men and 23 women, mean age = 19.4 years) at a large mid- western 
university volunteered to participate. All participants were recruited from non-major a class in the 
Telecommunications department. Volunteers were given partial credit towards a class assignment for participation. 

Materials 

All test sessions were conducted in a computing lab run by the University. The lab was equipped with 40 
computers, each running Pentium II processors, the Microsoft Windows NT operating system, and 64 megabytes of 
RAM. All displays were color SVGA, measured 15 inches diagonally, and were set to 800 x 600 resolution. The 
software used to run the data-collection instrument was HoiJava version LL 

The data-collection instrument was a software program written in Java by the researchers. The instrument 
interface included several important features (Figures 5-6). 

• A timeline/icon display which could be scrolled through both vertically and horizontally. 

• Questions to the participant. 

• Radio buttons providing a constant selection of answers to the questions (“Yes”, “No”, and “I can’t 
tell”). 

• A button to retrieve the next question. 

In addition, the instrument displayed several specific characteristics. 

• The timeline/icon display consumed approximately 30% of the total display area 

• Accompanying every icon was a thin black bar that stretched from the event’s starting point to its 
ending point in accordance with the timeline below it. 

• Clicking on the thin black bar associated with each icon caused light grey lines to descend from the 
starting and ending points down to the timeline. 
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Figure 5. Data collection instrument interface showing the linear arrangement of icons. 

Procedure 

Testing was conducted on various days over a two-week period between 9 a.m. and 7 p.m. Participants 
were allowed to select their own session times. As participants arrived at the lab they were met by one of the 
researchers and given instructions to review the study information sheet, sit down at an available computer of their 
choice, and log into the network using their university identification. All members of the research team used a script 
for the duration of the interaction with each participant. 

From a deck of 50 shuffled cards (25 for each condition), each participant was given one card which had an 
8-digit password printed on it that would inform the computer system which condition to present to the participant. 
Participants were then instructed to open the application called HotJava and enter the password on the card when 
prompted. Next the participants were provided a URL to enter into the application which called up the first practice 
screen for the instrument. At this time the screen was maximized to consume the entire display. 

Participants were next given a short demonstration of the basic functionality of the instrument. The 
demonstration included navigating the timeline display using the scroll bars, activating the drop-down “legs”, and 
moving on to the next question. If the participant did not have questions regarding the instrument, they were then 
presented with a second practice screen which they could use for as long as they wanted before beginning the test. 
Once the test was initiated, researchers did not interfere with the session.. 

Subjects answered 12 randomly ordered yes/no questions concerning the temporal relationship of two 
events on the timeline. Six temporal relationships (representing all the core relationships without their direct 
opposites, i.e., “contains” but not “contained by”) were addressed by the questions, with two questions devoted to 
each. The timeline display remained exactly as the subject left it from question to question, so subjects frequently 
had to scroll the display in order to locate the events named in the question before they could answer since those 
events were not necessarily visible on the screen. The same twelve questions were answered by all subjects in both 
conditions. 
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The instrument recorded three types of data. 

• the length of time in seconds from the appearance of the second practice screen until the subject 
clicked to go on to the questions 

• the subject’s answer (yes, no, I can’t tell) for each question 

• the length of time in seconds from the appearance of a new question until the subject clicked to go on 
to the next question 

All the data from the instrument were collected and stored automatically at the conclusion of each subject’s 
session in a database located on a separate computer. The data were identified only by the time of the session and 
by the 8-digit password. 




Figure 6. Data collection instrument interface showing the staggared arrangement of icons. 

Results 

Completion time 

Completion time data were analyzed using a one-way analysis of variance, and revealed significant 
differences between the linear and staggered displays, F(l, 41) = 8.14, p < .05. Means indicated that subjects using 
the linear display took longer to complete the test (1 182.86) than subjects using the staggered display (1 151.04). 

Answer accuracy 

Answer accuracy data were divided into two parts for analysis, including correctness ("Yes'V'No") and 
uncertainty ("I can’t tell "). One-way analyses of variance were conducted for both measures. A significant 
difference was found for correctness F(l, 41) = 4.52, p < .05, with means indicating that subjects using the linear 
display made more errors (1.42) than subjects using the staggered display (.57). No significant difference was found 
between conditions for the uncertainty measure. 
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Answer accuracy with “overlaps/overlapped by” removed 

Post hoc analyses revealed that removal of the “overlaps/overlapped by” temporal relationship from the 
data set resulted in no significant differences for answer accuracy across conditions. Further analysis revealed a 
significant difference for correctness, F (1, 41) = 6.21, p < .05, across conditions for the “overlaps/overlapped by” 
temporal relationship. Means indicated that subjects using the linear display made more errors on items that 
represented the “overlaps/overlapped by” relationship (.52) than subjects using the staggered display (.14). 



Discussion 

Completion Time 

Results for completion time were inconsistent with the authors’ original expectations. Subjects using the 
staggered display took approximately six minutes longer to complete the test than subjects using the linear display. 
The authors speculate that the amount of scrolling required to locate target events on the timeline using the linear 
arrangement was offset by the fact that subjects only needed to scan a single column of icons backward and forward 
in order to locate a target event. In contrast, subjects using the staggered arrangement had to scan entire screens of 
icons with no regular vertical or horizontal pattern. They also had to control the scrolling of the display more 
precisely to ensure that they had scanned every icon. 

The pairs of target events required to answer questions could be seen on the timeline display at the same 
time for six questions in the linear arrangement and only three questions in the staggered arrangement, which means 
that the subjects using the staggered arrangement had to locate one event and then the other twice as often as 
subjects using the linear arrangement. Subjects using the staggered arrangement may have taken more time both in 
looking at the display and in scrolling around the display than did the subjects using the linear arrangement. 

Once subjects using the staggered display located target events, they may have taken more time to identify 
the temporal relationship between events because the overall display they were scanning contained more visual 
noise (icons that were not the target events) than did the linear arrangement. 

Answer Accuracy 

Initial results for answer accuracy were also inconsistent with the authors’ expectations. Subjects using the 
linear display made more errors than subjects using the staggered display. However, post hoc analyses revealed that 
removal of the “overlaps/overlapped by” temporal relationship from the data set resulted in no significant 
differences for answer accuracy across conditions. The authors had speculated that visual noise in the staggered 
arrangement would interfere with subjects’ ability to make accurate identification of relationships and lead to more 
errors in that condition. 

Answer accuracy with “overlaps/overlapped by” removed 

Further analysis revealed that subjects using the linear arrangement made more errors identifying 
“overlaps/overlapped by” relationships than did subjects using the staggered display. The authors are unable to 
attribute this result to the questions themselves or to the nature of the temporal relationship, and unable to explain 
what element or elements of the displays might account for the result. 

Limitations of the study 

Temporal relationships between events are easier to see in diagram focjn than to describe in question form. 
The authors recognize that more rigorous pretesting of the stimulus questions is required to ensure that the questions 
are stated as clearly as possible. 

The data set chosen for the study, manned and unmanned space exploration missions, was chosen from 
several candidates for which there was ready availability many defined data points. The authors speculated that the 
content of the data set might be perceived as scientific and therefore somewhat neutral, or even mildly appealing to 
more than one audience. The unanticipated result of this choice was that almost all the events named in the stimulus 
questions were numbered (Venera 3, Mars 5, and so on). Subjects reported incorporating this feature of the data set 
into their search strategies in both the linear and the staggered arrangement conditions by searching for an event of 
the same name, noting its number and then scrolling either forward or backward depending on whether the number 
of the target item was higher or lower than the one found . Although the study will have to be duplicated with a 
different data set to determine what, if any effect, this choice had on the results of the study, the authors anticipate 






■that the effect may apply equally to both conditions since subjects in both conditions reported using the numbers to 
search 

Although the logical anticipation of the authors was that staggered displays might afford easier comparison 
of events because more events could conceivably appear on the screen at one time, the displays created by the 
algorithm in the instrument did not conform to this expectation. Of the twelve items, six in the linear condition 
showed both target events on screen at the same time compared to only three in the staggered condition. The authors 
recognize that this outcome may have affected the time required for subjects in the staggered condition to search for 
target items. Experimentation will have to be done with multiple data sets to determine whether the displays for this 
instrument were typical. 

Conclusion 

Despite the limitations of the study, the difference in time taken between subjects in the linear and 
staggered timeline conditions strongly suggests that linear arrangements may be a more efficient representation for 
time-based information in low-real estate displays than are staggered arrangements with respect to searching for 
specific events. 
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